<!--
 * @Author: ryo
 * @Date: 2021-11-20 23:13:11
 * @LastEditors: ryo
 * @LastEditTime: 2021-11-26 18:03:10
 * @Description: 项目业绩组件
 * @FilePath: \site\src\views\performance\Home.vue
-->
<template>
  <div class="performance">
    <!-- 轮播图 -->
    <m-carousel> </m-carousel>
    <!-- 项目业绩 -->
    <v-container fluid class="mb-15 mt-10 box">
      <v-row justify="center" align="center">
        <v-col>
          <div class="box_title">
            <div class="h2">项目业绩</div>
            <div class="caption">Project performance</div>
          </div>
        </v-col>
      </v-row>

      <v-row justify="center" align="center">
        <v-col cols="12">
          <v-data-table
            :mobile-breakpoint="900"
            :items-per-page="-1"
            :headers="tableModel.headers"
            :items="projects"
            :hide-default-footer="true"
            :footer-props="{
              'disable-items-per-page': true
            }"
            class="performance_table"
          >
            <template v-slot:footer>
              <div class="text-center mt-4">
                <v-pagination
                  v-model="tableModel.page"
                  :length="tableModel.length"
                  :total-visible="5"
                  color="red"
                  @input="handleChange"
                ></v-pagination>
              </div>
            </template>
          </v-data-table>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
// 组件
import mCarousel from '@/components/common/Carousel.vue';
// 常量
import constant from '@/const';

export default {
  name: 'Performance',
  components: {
    mCarousel
  },
  data() {
    return {
      tableModel: {
        ...constant.performance.table,
        page: 1,
        pageNumber: 20,
        length: Math.ceil(constant.performance.table.list.length / 20)
      }
    };
  },
  computed: {
    projects() {
      let start = (this.tableModel.page - 1) * this.tableModel.pageNumber;
      let end = start + this.tableModel.pageNumber;
      return this.tableModel.list.slice(start, end);
    }
  },
  methods: {
    handleChange(value) {
      return value;
    }
  }
};
</script>

<style lang="scss" scoped>
.performance {
  &_table {
    ::v-deep .v-data-table-header {
      background-color: rgba(209, 23, 30, 1);

      & > tr > th {
        color: #fff !important;
      }
    }

    ::v-deep tr:nth-of-type(2n + 2) {
      background-color: rgba(209, 23, 30, 0.5);
      color: #fff;

      &:hover {
        background-color: rgba(252, 71, 77, 0.5) !important;
      }
    }
  }

  ::v-deep {
    .v-pagination__navigation,
    .v-pagination__item,
    .v-pagination__item--active {
      box-shadow: none;
    }
  }
}
</style>
